<div class="row explore-component">
  <div class="col-md-12">
    <search-box (search)="update()" [(params)]="params"></search-box>
    <panel *ngIf="params && !loading.count">
      <div class="infos">
        <div class="summary">
          <span [hidden]="count.total == 0">{{ count.start + 1 | number }} - {{ count.start + items.length | number }} of </span>{{ count.total | number }} Documents
        </div>
        <div class="actions">
          <button class="btn btn-default" *ngIf="hasPrevious" (click)="previous()">
            Previous
          </button>
          <button class="btn btn-default" *ngIf="hasNext" (click)="next()">
            Next
          </button>
        </div>
      </div>
    </panel>
    <panel [hidden]="!loading.content">
      <h1 class="center loading">
        Loading...
      </h1>
    </panel>
    <pretty-json  *ngFor="let item of items"
                  [hidden]="loading.content"
                  autoCollapse="true"
                  [json]="item"
                  [readOnly]="readOnly"
                  (go)="go($event)"
                  (edit)="editDocument(item._id, $event)"
                  (remove)="remove(item._id)">
    </pretty-json>
  </div>
</div>
